<template>
  <div class="header">
    <div class="l">
      <img :src="imgSrc" alt="" srcset="">
    </div>
    <div class="r">
      <span>数字媒体图片展</span>
    </div>
  </div>
</template>

<script>
import headImg from '../assets/images/logo.png'
export default {
  data(){
    return {
      imgSrc: headImg
    }
  }
}
</script>

<style lang="scss">
  .header{
    background-color: #395178;
    overflow: hidden;

    .l{
      width: 20%;
      line-height: 100px;
      float: left;
      img{
        height: 80px;
        width: 110px;
            vertical-align: middle;
      }
    }

    .r{
      width: 80%;
      line-height: 100px;
      float: left;
      font-size: 48px;
      color: #fff;
      text-align: center;
      span{
        margin-right: 100px;
        letter-spacing: 8px;
      }
    }
  }
</style>